 <!--
 * @Description: 寝室视频审核
 * @Author: along
 * @Date: 2020-10-17
 * @Last Modified by: liyujie
 * @Last Modified time: 2021-05-27
-->
<template>
    <div class="container dormExamineList">
        <div class="content-wrapper">
            <!-- header -->
            <div class="header">
                <div class="header-title">
                    审核列表
                </div>
            </div>
            <div class="filter-view">
                <div class="header-new-box">
                    <p class="header-new-box-title">
                        批次组名称
                    </p>
                    <el-input
                        placeholder="请输入批次组名称"
                        v-model="formData.title"
                        suffix-icon="el-icon-search"
                        clearable
                        size="medium"
                        style="width: 202px"
                        @keydown.enter.native="getTableData(1)"
                    />
                </div>
                <div class="header-new-box">
                    <p class="header-new-box-title">公司名称</p>
                    <el-input
                        v-model="formData.company_name"
                        size="medium"
                        style="width: 202px"
                        placeholder="请输入公司名称"
                        clearable
                        @keydown.enter.native="getTableData(1)"
                    />
                    <!--<el-select
                            v-model="formData.company_name"
                            filterable
                            remote
                            clearable
                            size="small"
                            reserve-keyword
                            placeholder="请输入选择名称"
                            :remote-method="remoteMethod"
                            :loading="loading"
                            @change="changeHire()"
                        >
                            <el-option
                                v-for="item in suggestList"
                                :key="item.hire_no"
                                :label="item.company_name"
                                :value="item.company_name"
                            />
                        </el-select>-->
                </div>
                <div class="header-new-box">
                    <p class="header-new-box-title">产品名称</p>
                    <el-input
                        v-model="formData.series_title"
                        placeholder="请输入产品名称"
                        size="medium"
                        style="width: 202px"
                        clearable
                        suffix-icon="el-icon-search"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                    />
                </div>
                <div class="header-new-box">
                    <p class="header-new-box-title">视频批次</p>
                    <el-select
                        v-model="formData.series_no"
                        clearable
                        filterable
                        placeholder="请选择"
                        size="medium"
                        style="width: 202px"
                        @change="getTableData(1)"
                    >
                        <el-option
                            v-for="item in batchList"
                            :key="item.series_index"
                            :label="item.series_index"
                            :value="item.series_index"
                        />
                    </el-select>
                </div>
                <div class="header-new-box">
                    <p class="header-new-box-title">提交审核时间</p>
                    <el-date-picker
                        v-model="date"
                        type="datetimerange"
                        :picker-options="pickerOptions()"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"
                        align="right"
                        size="medium"
                        style="width: 360px"
                        @change="getTableData(1)"
                    />
                </div>
                <div class="header-new-box">
                    <el-button
                        type="primary"
                        size="small"
                        @click="getTableData(1)"
                    >
                        查询
                    </el-button>
                </div>
            </div>
            <!-- /header -->

            <!-- table -->
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;"
                    ref="dormExamineList"
                    @select="fnSelect"
                    @select-all="fnSelectAllTop"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column
                        type="selection"
                        width="50"
                        align="center"
                        fixed="left"
                    />
                    <el-table-column
                        type="index"
                        width="80"
                        label="序号"
                        align="center"
                    />
                    <el-table-column
                        prop="title"
                        label="批次组名称"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="left"
                    />
                    <el-table-column
                        prop="count"
                        label="目标数量"
                        show-overflow-tooltip
                        align="center"
                    />
                    <!--<el-table-column
                    prop="series_title"
                    label="产品名称"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                />
                <el-table-column
                    prop="video_count"
                    label="视频总数"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                />-->
                    <el-table-column
                        prop="video_audit_wait_count"
                        label="待审核"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <p
                                :style="{color: '#F53341'}"
                                v-if="scope.row.video_audit_wait_count"
                            >{{ scope.row.video_audit_wait_count }}</p>
                            <p v-else>--</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="video_trans_success_count"
                        label="处理完成 / 处理中"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.video_trans_success_count }} / {{ scope.row.video_trans_processing_count }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="submit_audit_time"
                        label="提交审核时间"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="left"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.submit_audit_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="submit_admin_true_name"
                        label="提交人"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="left"
                    />
                    <el-table-column
                        label="操作"
                        fixed="right"
                        :width="180"
                    >
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                class="curse-add"
                                @click="showRecordDialog(scope.row)"
                            >
                                操作日志
                            </el-button>
                            <el-button
                                type="text"
                                class="curse-add"
                                @click="examineVideo(scope.row)"
                            >
                                审核
                            </el-button>
                            <el-button
                                type="text"
                                class="curse-add"
                                style="color: #F95B56"
                                @click="deleteVideo(scope.row)"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- /table -->

            <!-- /分页 -->
            <div class="pagination-wrapper clearfix">
                <el-checkbox
                    v-model="checkedAll"
                    :indeterminate="checkIndeterminate"
                    @change="fnChangeChecked"
                >全选</el-checkbox>
                <el-button
                    type="text"
                    :disabled="multipleSelection.length == 0 ? true : false"
                    @click="deleteAll()"
                    :style="{marginLeft: '15px'}"
                >删除</el-button>
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page.sync="page.now_page"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                />
            </div>

            <!-- 删除弹窗 -->
            <dialog-delete
                ref="delete"
                :url="'http://cdn.zsdx.cn/phaadmin/dialog-waring.png'"
                :title="'确定删除该批次的视频吗?'"
                :content="'删除之后不可以撤销'"
                @confrim="confrim()"
            />

            <!-- 全选删除弹窗 -->
            <dialog-delete
                ref="deleteAll"
                :url="'http://cdn.zsdx.cn/phaadmin/dialog-waring.png'"
                :title="'确定删除所选择批次的视频吗?'"
                :content="'删除之后不可以撤销'"
                @confrim="confrimAll()"
            />
            <!-- 操作记录弹窗 -->
            <operation-record-dialog
                ref="recordDialog"
            />
        </div>
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import dialogDelete from '@/components/dialog/index.vue';
import OperationRecordDialog from "@/components/dorm/operation-record-dialog";

const FILTER = {
    // 批次组名称
    title: '',
    company_name: '',//公司名称
    series_title: '',//产品名称
    series_no: '',//视频批次
};

const LIST = {
    suggestList: [],//公司名称列表
    loading: false,
    batchList: [],//视频批次列表
    date: [],//审核时间筛选
};

export default {
    mixins: [back],
    components: {
        OperationRecordDialog,
        dialogDelete
    },
    data () {
        return {
            ID: '',
            formData: {
                ...FILTER,
            },
            ...LIST,
            checkIndeterminate: false,
            multipleSelection: [],
            checkedAll: false,
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            tableData: [],
            authResult: {}
        };
    },
    filters: {},
    computed: {},
    watch: {},
    mounted () {
        this.init();
    },
    methods: {
        /**
         * @description 初始化页面数据
         */
        init () {
            this.$store.commit('SET_HEADER', [{ title: "官网"},{title: '商家增值服务'},{title: '寝室视频审核'}]);
            this.authResult = this.$route.meta.authResult;
            this.getTableData();
            this.getSuggest();
            this.getBatchList();
        },

        /**
         * @description 获取表格数据
         */
        getTableData (page) {
            this.$post('/student/room_series%5Cget_list', {
                page_id: page || this.page.now_page,
                company_name: this.formData.company_name,
                series_title: this.formData.series_title,
                title: this.formData.title,
                series_index: this.formData.series_no,
                start_submit_time: this.date === null ? '' : (this.date.length == 0 ? '' : parseInt(new Date(this.date[0]).getTime() / 1000)),
                end_submit_time: this.date === null ? '' : (this.date.length == 0 ? '' : parseInt(new Date(this.date[1]).getTime() / 1000)),
                is_audit: 1
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * @description 获取视频批次列表
         */
        getBatchList () {
            this.$post('/student/room_series%5Cget_series_index_list', {
                hire_no: this.formData.hire_no,
                keyword: '',
                is_audit: 1
            }, resp => {
                if (resp.code == 1) {
                    this.batchList = resp.data.list;
                }
            });
        },

        /**
         * @description 获取商家列表
         */
        getSuggest (keyword) {
            this.$post('/student/room_series%5Cget_company_list', {
                keyword: keyword
            }, resp => {
                if (resp.code == 1) {
                    this.suggestList = resp.data.list;
                }
            });
        },

        /**
         * @description 选择商家
         */
        changeHire () {
            this.getTableData(1);
            this.getBatchList();
        },

        /**
         * @description 搜索公司名称
         */
        remoteMethod (query) {
            if (query !== '') {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.getSuggest(query);
                }, 200);
            }
        },

        /**
         * @description 删除审核视频
         */
        deleteVideo (row) {
            if(!this.authResult.auth_delete) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.ID = row.series_no;
            this.$refs.delete.showDialog();
        },

        /**
         * @description 确定删除
         */
        confrim () {
            this.$post('/student/room_series%5Cdelete',{
                series_no: this.ID
            },resp=>{
                if (resp.code == 1) {
                    this.getTableData();
                    this.$notify({
                        title: '提示',
                        message: '删除成功',
                        type: 'success',
                        duration: 2000
                    });
                } else if (resp.code == 0) {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 审核视频
         */
        examineVideo (row) {
            this.$router.push({
                name: 'dormVideoExamine',
                query: {
                    series_no: row.series_no
                }
            });
        },

        /**
         * @description 全部删除
         */
        deleteAll () {
            this.$refs.deleteAll.showDialog();
        },

        /**
         * @description 确定全部删除
         */
        confrimAll () {
            // console.log('multipleSelection', this.multipleSelection);

            let sessionList = this.multipleSelection.reduce((cur,next) => {
                cur.push(next.series_no);
                return cur;
            },[]);

            sessionList.map(item => {
                this.$post('/student/room_series%5Cdelete',{
                    series_no: item
                },resp=>{
                    if (resp.code == 1) {
                        //
                    }
                });
            });

            setTimeout(()=> {
                this.getTableData();
                this.$notify({
                    title: '提示',
                    message: '删除成功',
                    type: 'success',
                    duration: 2000
                });
            },500);
        },

        /**
         * @description 全选逻辑操作
         */
        fnSelect(selection) {
            if(selection.length == this.tableData.length) {
                this.checkedAll = true;
            }else{
                this.checkedAll = false;
            }
            if(selection.length > 0 && selection.length < this.tableData.length) {
                this.checkIndeterminate = true;
            }else{
                this.checkIndeterminate = false;
            }
        },
        fnSelectAllTop(selection) {
            if(selection.length > 0) {
                this.checkedAll = true;
            }else{
                this.checkedAll = false;
            }
            if(selection.length > 0 && selection.length < this.tableData.length) {
                this.checkIndeterminate = true;
            }else{
                this.checkIndeterminate = false;
            }
        },
        fnChangeChecked() {
            if(this.checkedAll){
                this.toggleSelection(1);
            }else{
                this.toggleSelection();
            }
        },
        toggleSelection(rows) {
            if (rows) {
                this.$refs.dormExamineList.toggleAllSelection();
            } else {
                this.$refs.dormExamineList.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        /**
         * @description 时间处理
         */
        pickerOptions () {
            return {
                shortcuts : [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();

                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();

                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();

                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            };
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },

        /**
         * 显示操作记录弹窗
         * @param row
         */
        showRecordDialog(row) {
            if(!this.authResult.auth_log) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.$refs.recordDialog.show(row.series_no);
        }
    }
};
</script>

<style lang="less" scoped>
    .container {
        width: 100%;
        .content-wrapper {
            display: flex;
            height: calc(100% - 24px);
            flex-direction: column;
            position: relative;
            margin: 12px;
            background: #fff;
            box-sizing: border-box;
            overflow-y: auto;
            .header {
                height: 66px;
                padding: 0 32px;
                box-sizing: border-box;
                box-shadow: 0px -1px 0px 0px #F0F2F5;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid #EBEEF5;

                .header-title {
                    color: #333333;
                    height: 20px;
                    position: relative;
                    margin: 24px 0;
                    font-size: 18px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                }
            }
            /*筛选*/
            .filter-view {
                box-sizing: border-box;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                padding: 0 24px;
                margin-top: 12px;

                .header-new-box {
                    display: flex;
                    align-items: center;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    white-space: nowrap;
                    margin-right: 24px;
                    margin-bottom: 12px;

                    &-title {
                        margin-right: 16px;
                        white-space: nowrap;
                    }
                }
            }
            .table-wrapper {
                padding: 0 24px;
                flex: 1;
                height: 0;
            }
            /* 表单 */
            .scope-price {
                width: 50px;
                height: 50px;
            }
            /* 字体高亮 */
            .cursor-font {
                color: rgb(64, 158, 255);
                cursor: pointer;
            }
            /* 分页 */
            .pagination-wrapper {
                padding: 12px 24px;
                .el-pagination {
                    float: right;
                    padding: 0;
                    background-color: transparent;
                    margin-top: 6px;
                }
            }
        }

    }
    /* 排序 */
    .sort-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        .sort-spliter {
            width: 1px;
            height: 12px;
            background: rgba(235, 235, 235, 1);
            margin: 0 10px;
            }
            .btn-sort {
            font-size: 14px;
            line-height: 1;
            color: #ccc;
            &:hover {
                color: #20a0ff;
            }
        }
    }
    .el-button-left {
        margin-left: 40px;
    }
    .el-button-right {
        margin-right: 10px;
    }
</style>
<style lang="less">
    .dormExamineList{
        .el-table__body-wrapper .el-table__body .el-table__row td {
            border-right: none;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            border-right: none;
        }
        .el-table .el-table_1_column_6  .cell {
            position: relative;
        }
        .el-range-editor--small .el-range-separator{
            padding: 0 1px !important;
        }
    }
</style>
